<template>
  <!-- tab基本信息表单  -->
  <el-scrollbar style="height: 100%">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" class="form-input-m" inline-message>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="编码" prop="barcodeNo">
            <el-input v-model="formData.barcodeNo" placeholder="请输入编码" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集量" prop="collectQty">
            <el-input v-model="formData.collectQty" type="number" placeholder="请输入采集量" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="名称" prop="barcodeNa">
            <el-input v-model="formData.barcodeNa" placeholder="请输入名称" clearable @blur="addInputCode()"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="助记符" prop="ma">
            <el-input v-model="formData.ma" type="text" placeholder="请输入助记符" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="简称" prop="shortName">
            <el-input v-model="formData.shortName" placeholder="请输入简称" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="提示文字" prop="labelTips">
            <el-input v-model="formData.labelTips" type="text" placeholder="请输入提示文字" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="份数" prop="labelPrintNum">
            <el-input v-model="formData.labelPrintNum" type="interger" placeholder="请输入份数" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="费用编码" prop="feeCode">
            <el-input v-model="formData.feeCode" type="text" placeholder="请输入费用编码" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="试管颜色" prop="color">
            <template #default>
              <el-color-picker v-model="formData.color" />
              <el-tag class="margin-lr-xs" :style="{ background: formData.color ? formData.color : '' }" v-if="formData.color">{{ formData.color }}</el-tag>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="颜色文本" prop="colorText">
            <el-input v-model="formData.colorText" type="text" placeholder="请输入颜色文本" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="样本类型" prop="sampleTypeCode">
            <SelectDataList ref="employeeSelectRef" :url="'/api/lab/labSampleType/findSampleTypeList'" :displayField="[
              { title: '编码', props: 'sampleTypeCode' }, //列标题
              { title: '名称', props: 'sampleTypeName' },
              { title: '主键', props: 'id' }
            ]" :searchParam="{
              code: 'spectype'
            }" :placeholder="'点击选择样本类型'" @selectDataRow="SelectRowClick" @clearValue="clearValueHandler" @sliceValue="sliceHandler" v-model="formData.sampleTypeName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="院区" prop="orgName">
            <el-input v-model="formData.orgName" type="text" placeholder="请输入院区" disabled clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="检验科采样" prop="color">
            <template #default>
              <el-checkbox v-model="formData.labPrintFlag" :true-label="1" :false-label="0" border></el-checkbox>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采样提示" prop="collectTips">
            <el-input v-model="formData.collectTips" type="text" placeholder="请输入采样提示" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :span="24">
        <el-col :span="12">
          <el-form-item label="报告单元" prop="rptGroupName">
            <template #default>
              <SelectDataList ref="employeeSelectRef1" :url="'api/rptGroup/findRptGroup'" :displayField="[
                { title: '编码', props: 'rptGroup' }, //列标题
                { title: '名称', props: 'rptGroupName' }
              ]" :placeholder="'点击选择报告单元'" :searchParam="{}" @selectDataRow="SelectRowClick1" v-model="formData.rptGroupName" />
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="采集量" prop="collectQty">
            <el-input v-model="formData.collectQty" type="text" placeholder="采集量" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" placeholder="请输入备注" clearable type="textarea" style="width: 560px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <EditExtraProperties ref="EditExtraPropertiesRef" />
  </el-scrollbar>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref, reactive, watch, getCurrentInstance, PropType } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { funBdsJsResult } from '@/utils/Expression'; //函数公式
import VxePulldownSelection from '@/components/VxePulldownSelection.vue'; //引用下拉框组件
import EditExtraProperties from '@/components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import SelectDataList from '@/components/SelectDataList.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
import { AppStore } from '@/stores/store';
let store = AppStore();
const formRef = ref(); //表单ref标记

// 表单绑定的数据
let formData = reactive({
  id: '' /*主键*/,
  barcodeNo: '' /*分管类别编码*/,
  barcodeNa: '' /*分管类别名称*/,
  shortName: '' /*分管类别简称*/,
  color: '' /*16进制颜色值(例如：#fff)*/,
  colorText: '' /*颜色名称(例如：紫)*/,
  sampleTypeCode: '' /*样本类型主键*/,
  sampleTypeName: '' /*样本类型名称*/,
  labelTips: '' /*标签提示文字*/,
  labelPrintNum: 1 /*标签打印份数*/,
  feeCode: '' /*费用编号/主键*/,
  orgId: '' /*组织机构主键*/,
  orgCode: '' /*组织机构编码*/,
  orgName: '' /*组织机构名称*/,
  ma: '' /*助记符*/,
  rptGroup: '' /*报告单元主键*/,
  rptGroupName: '' /*报告单元名称*/,
  remark: '' /*备注*/,
  labPrintFlag: 0 /*检验科采样(0：非，1：是)*/,
  minCollectQty: 0 /*最小采集量*/,
  tubeFlagId: '' /*试管类别主键 来自字典*/,
  collectTips: '' /*采样提示*/,
  collectDictId: '' /*采样字典主键 来自字典*/,
  timestamp: '', /*时间戳，及时更新form 表单*/
  collectQty: ''/**采集量 */
});

// 表单校验规则
const formRules = reactive<VxeFormPropTypes.Rules>({
  code: [{ required: true, message: '请输入编码' }],
  name: [{ required: true, message: '请输入名称' }],
  shortName: [{ required: true, message: '请输入简称' }]
});

const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref
// const collapseStatus = ref(false);

defineExpose({
  addNew,
  saveForm,
  clearFormData
});

// 父组件传值
let props = defineProps({
  currentRow: { type: Object as PropType<any>, required: true }
}) as any;
watch(
  () => props.currentRow,
  (nval, oval) => {
    Object.assign(formData, nval);
    // for (const key in nval) {
    //   if (Object.prototype.hasOwnProperty.call(nval, key)) {
    //     const element = nval[key];
    //     formData[key] = element;
    //   }
    // }
  },
  {
    deep: true,
    immediate: true
  }
);

watch(
  () => formData.name,
  (n, o) => {
    formData.ma = funBdsJsResult('firstPinYinFun', n);
  },
  { deep: true }
);

// 方法定义区 =============
function addNew(callback: any) {
  clearFormData(); // 清空表单
  if (callback) {
    callback({ a: '初始化完成' });
  }
}
// 清空表单
function clearFormData(callback: any) {
  formData.id = '';
  formData.barcodeNo = '';
  formData.barcodeNa = '';
  formData.shortName = '';
  formData.color = '';
  formData.colorText = '';
  formData.sampleTypeCode = '';
  formData.sampleTypeCode = '';
  formData.sampleTypeName = '';
  formData.labelTips = '';
  formData.labelPrintNum = 1;
  formData.feeCodeId = '';
  formData.orgId = '';
  formData.orgCode = '';
  formData.orgName = '';
  formData.ma = '';
  formData.rptGroup = '';
  formData.rptGroupName = '';
  formData.remark = '';
  formData.labPrintFlag = '';
  formData.minCollectQty = 0;
  formData.tubeFlagId = '';
  formData.collectTips = '';
  formData.collectDictId = '';
  formData.timestamp = '';
  formData.collectQty = '';
  if (callback) {
    callback(true);
  }
}

// 选择下拉框的某一行数据
function vxePullDownConfirm(e: any) {
  e.aimKeys.forEach((item: any) => {
    if (e.isChild) {
      //todo
    } else {
      formData[item.targetField] = e.row[item.sourceField];
    }
  });
}

// 保存分管类别
function saveForm(callback: any) {
  const el: any = proxy.$refs['formRef'];
  formRef.value?.validate((valid: any) => {
    if (!valid) {
      VxeMessage('校验表单失败', VxeNotifyType.error);
      return false;
    }
    let url = '';
    formData.orgId = store.userInfo.orgId;
    // 判断添加和编辑接口
    if (formData.id) {
      url = '/api/lab/labbarcodetype/editBarCodeType';
    } else {
      url = '/api/lab/labbarcodetype/addBarCodeType';
    }
    proxy.$http
      .post(url, formData)
      .then((res: any) => {
        if (res.status.code === 1) {
          if (formData.id) {
            proxy.$emit('findList');
            VxeMessage('修改分管类别成功', VxeNotifyType.success);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增分管类别成功', VxeNotifyType.success);
          }
          if (callback) {
            callback(true);
          }
        } else {
          if (formData.id) {
            proxy.$emit('findList');
            VxeMessage('修改分管类别失败', VxeNotifyType.error);
          } else {
            proxy.$emit('findList');
            VxeMessage('新增分管类别失败', VxeNotifyType.error);
          }
          if (callback) {
            callback(false);
          }
        }
      })
      .catch((err: any) => {
        // VxeMessage('保存分管类别异常', VxeNotifyType.error);
        // if (callback) {
        //   callback(false);
        // }
      });
  });
}
// 打开配置扩展属性弹框
function openEditExtraProperties() {
  EditExtraPropertiesRef.value?.toggleDialog();
}

let employeeSelectRef: any = ref(null);
let employeeSelectRef1: any = ref(null);

let visibleOutReporter: any = ref(false);
let visibleOutReporter1: any = ref(false);

// 组件
//点击选择的那一项受检单位
function SelectRowClick(row) {
  formData.sampleTypeCode = row.sampleTypeCode;
  formData.sampleTypeName = row.sampleTypeName;
  visibleOutReporter.value = false;
}
// 清空组件输入框
function clearValueHandler() {
  formData.sampleTypeCode = '';
  formData.sampleTypeName = '';
}
// 键盘事件删除输入框文字
function sliceHandler() {
  let newStr = formData.sampleTypeCode.slice(0, -1);
  formData.sampleTypeCode = newStr;
}

// 组件
//点击选择的那一项受检单位
function SelectRowClick1(row) {
  formData.rptGroup = row.rptGroup;
  formData.rptGroupName = row.rptGroupName;
  visibleOutReporter1.value = false;
}
// 填写仪器名称 自动生成助记符
function addInputCode() {
  formData.ma = funBdsJsResult('firstPinYinFun', formData.barcodeNa);
}
</script>

<style lang="scss" scoped>
.el-button--default {
  padding: 5px 11px;
}

.el-tag {
  color: $base-white;
}
</style>
